<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.min.js" ></script>
	</head>
	<body>
		<div id="app">
			<!--
				父组件，可以在引用子组件时，通过 属性绑定(v-bind:)的形式，把 需要传递给
				子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用
			-->
			<com1 v-bind:parentmsg="msg"></com1>
		</div>
	</body>
	<script>
		var vue=new Vue({
			el:"#app",
			data:{
				msg:"这是父组件里的值"
			},
			methods:{
				
			},
			components:{
				/**
				 * 1.经过演示，发现子组件中，默认无法访问到 父组件中的data 上的数据 和 methods中的方法
				 */
				com1:{
					/**
					 * 子组件中data上的数据，并不是通过父组件传递过来的，而是子组件私有的，
					 * 如：子组件通过Ajax,请求回来的数据，都可以放在data上
					 * 注意：data中的数据即可读，也可写
					 */
					data(){
						return{
							msg:"子组件里的值"
						}						
					},
					template:"<h1>这是子组件显示的内容---{{parentmsg}}</h1>",
					/*
					 * 父组件传递过来的parentmsg属性，必须现在props数组中定义，
					 * 这样才能够使用这个数据
					 * 
					 * 注意：props中的数据，只可读，不可写
					 */
					props:['parentmsg'], 
					methods:{
						
					}
				}
			}
			
		});
	</script>
</html>